<template>
  <div class="task-monitoring-log">
    <BeTable
      rowKey="id"
      :columns="columns"
      :pagination="{ pageSize: 15, total: 100 }"
      :data-source="tableData"
      :rowSelection="rowSelection"
      :scroll="{ x: 1400 }"
      :formSetting="{ fields: searchFields, maxVisible: 4, labelCol: { style: { width: '120px' } } }"
    >
      <template #toolbar>
        <a-dropdown trigger="click">
          <BeButton type="primary">
            导出
            <BeIcon icon="local:drown" class="dropdown-arrow-icon" />
          </BeButton>
          <template #overlay>
            <a-menu>
              <a-menu-item :disabled="selectedRowKeys.length <= 0">导出选中结果</a-menu-item>
              <a-menu-item>导出查询结果</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <BeButton type="primary">批量忽略</BeButton>
      </template>
      <!-- 自定义单元格内容 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-popconfirm title="确定忽略？" okText="确定" cancelText="取消">
            <BeButton type="link">忽略</BeButton>
          </a-popconfirm>
        </template>
        <template v-if="column.key === 'status'">
          {{ record.status }}
        </template>
        <template v-if="column.key === 'level'">
          {{ record.level }}
        </template>
      </template>
    </BeTable>
  </div>
</template>

<script lang="ts" setup>
import BeIcon from '@/components/basics/BeIcon/src/BeIcon.vue'
import { TableColumnsType } from 'ant-design-vue'

defineOptions({ name: 'TaskMonitoringLog' })

// state
const selectedRowKeys = ref([])
const searchFields = [
  {
    label: '表/对象/文件名称',
    prop: 'objectName',
    component: 'Input',
    componentProps: { placeholder: '请输入' }
  },
  {
    label: '日志名称',
    prop: 'logName',
    component: 'Input',
    componentProps: { placeholder: '请输入' }
  },
  {
    label: '级别',
    prop: 'level',
    component: 'Input',
    componentProps: { placeholder: '请输入' }
  },
  {
    label: '状态',
    prop: 'status',
    component: 'Input',
    componentProps: { placeholder: '请输入' }
  }
]
// 表格定义
const columns: TableColumnsType = [
  { title: '表/对象/文件名称', dataIndex: 'objectName', align: 'center', fixed: 'left' },
  { title: '日志名称', dataIndex: 'logName', align: 'center' },
  { title: '日志描述', dataIndex: 'logDesc', align: 'center' },
  { title: '阶段', dataIndex: 'step', align: 'center' },
  { title: '时间', dataIndex: 'time', align: 'center' },
  { title: '级别', key: 'level', align: 'center' },
  { title: '状态', key: 'status', align: 'center' },
  { title: '操作', key: 'action', align: 'center', fixed: 'right', width: 100 }
]
// 表格数据
const tableData = ref([
  {
    key: 1,
    objectName: 'TESTB_5W',
    logName: '脱敏算法处理错误',
    logDesc: '脱敏发生错误',
    step: '数据脱敏',
    time: '2024-11-06 14:44:33',
    level: 'WARNING',
    status: '未处理',
    tooltip: '脱敏：TESTB_5W中Port字段值 语⾔口 脱敏失败！将使⽤默认保留算法脱敏'
  }
])

const rowSelection = ref({
  selectedRowKeys: selectedRowKeys,
  onChange: (keys: (string | number)[], selectedRows: any) => {
    console.log(`selectedRowKeys: ${keys}`, 'selectedRows: ', selectedRows)
    selectedRowKeys.value = keys as any
  },
  onSelect: (record: any, selected: boolean, selectedRows: any) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
    console.log(selected, selectedRows, changeRows)
  }
})
</script>
<style lang="scss">
.task-monitoring-log {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 16px 0;
  background-color: var(--color-white);
  .be-table {
    .be-table__toolbar {
      gap: 8px;
      .dropdown-arrow-icon {
        transform: rotate(90deg);
      }
    }
  }
}
</style>
